<template>
  <div>
    <el-upload style="position: absolute"
        ref="elUploadRef"
        :action="uploadUrl"
        :headers="{ authorization: getToken() }"
        :show-file-list="false"
        :on-success="uploadSuccess"
        :on-error="uploadError"
    >
      <template #trigger>
        <div
            id="download"
            @mouseover="isHovered = true"
            @mouseleave="isHovered = false"
            :style="circleStyle"
            class="upload-circle"
        >
          <div :style="circleContentStyle" class="circle-content">+</div>
        </div>
      </template>
    </el-upload>
    <el-tour v-model="isOpenTour">
      <el-tour-step placement="left-start" target="#download" description="点击可以上传文件">
      </el-tour-step>

    </el-tour>
  </div>
</template>
<script setup>
import {computed, onMounted, ref} from 'vue'
import {getToken} from '@/utils/token'
import {ElMessage} from 'element-plus'

const isOpenTour = ref(false);
const DOWNLOAD_TOUR_KEY = "download_tour";
onMounted(() => {
  let result = localStorage.getItem(DOWNLOAD_TOUR_KEY);

  if (!result) {
    setTimeout(()=>{
      isOpenTour.value = true;
    },1000)
    localStorage.setItem(DOWNLOAD_TOUR_KEY, "ok");
  }
})

const props = defineProps(['path','fetchSysFileList'])
const uploadUrl = `${import.meta.env.VITE_APP_BASE_API}/file/uploadFile?path=${encodeURIComponent(props.path)}`
const isHovered = ref(false) // 用于控制鼠标悬浮状态

const circleStyle = computed(() => {
  return {
    position: 'fixed',
    top: '20px',
    right: '20px',
    width: '50px',
    height: '50px',
    borderRadius: '50%',
    backgroundColor: 'rgba(0, 0, 0, 0.3)', // 默认透明背景
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    cursor: 'pointer',
    transition: 'background-color 0.3s, opacity 0.3s',
    opacity: isHovered.value ? 1 : 0.3 // 控制透明度
  }
})

const circleContentStyle = computed(() => {
  return {
    opacity: isHovered.value ? 1 : 0.7 // 控制透明度
  }
})

const elUploadRef = ref()
const uploadSuccess = (resp) => {
  console.log(resp, 11111)
  if (resp?.code === '200') {
    ElMessage.success('文件上传成功')
    props.fetchSysFileList(props.path)
  } else {
    ElMessage.error(resp ? resp.msg : '上传失败')
  }
}
const uploadError = (resp) => {
  ElMessage.error('上传失败')
}
</script>
<style scoped>
.upload-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.circle-content {
  font-size: 24px;
  color: white;
}
</style>
